<template>
    <div class="friendCircle">
         <page-header  @toLastPage="toLastPage" :backgroundColor=backgroundColor :returnWhite="white">
             <template v-slot:title v-if="showTitle">
                 朋友圈
             </template>
            <template v-slot:right >
               <svg class="icon" aria-hidden="true" :style="'color:'+cameraColor+';'" @click="publishCircle">
                <use xlink:href="#icon-xiangji"></use>
                </svg>
            </template>
        </page-header>
        <div class="bg" @click="chooseBg"></div>
        <div class="userInf flex" v-if="userInf">
            <div class="nickname">{{userInf.nickname}}</div>
            <van-image
            width="2rem"
            height="2rem"
            fit="cover"
            radius=".2rem"
            :src="userInf.avatar"
            />
        </div>
      <div class="pyq-content" ref="content">
        <div v-for="(item,index) in circleInformation" :key="index">
            <circle-list :data=item></circle-list>
        </div>
      </div>
      <!-- 发布朋友圈 -->
      <van-action-sheet
    v-model="showPublishAction"
    :actions="actions"
    cancel-text="取消"
    close-on-click-action
    @select="onSelect">
    <van-uploader multiple max-count="9" :after-read="afterRead">
    从相册选择
    </van-uploader>
      </van-action-sheet>
       <loading v-if="showLoading"></loading>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import circleList from './circleList';
import loading from '../common/loading';
import {Meteor} from 'meteor/meteor';
import { image, user, friends, circleInf } from '../../../api/collections/index';
import upload from '../../../api/libs/upload';
export default {
    components:{
        pageHeader,
        circleList,
        loading
    },
    meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        const getUser = user.findOne({_id:this.id})
        if(getUser){
        const avatar = image.findOne({_id:getUser.avatarId})
       avatar&&(getUser.avatar = avatar.base64)
        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
        return  getUser
    },
    circleInformation(){
       let listArr = friends.find({F_UserID:this.id}).fetch()
         let arr = []
         let list = []
         arr.push(this.id)
         listArr.forEach(e => {
             arr.push(e.F_FriendID)
         })
         arr.forEach(e => {
            let val = circleInf.find({uid:e}).fetch()
            list.push(...val)
         })
         list.forEach(e => {
             if(e.uid !== this.id){
                 const inf = friends.findOne({F_UserID:this.id,F_FriendID:e.uid})
                 const userInf = user.findOne({_id:e.uid})
                 const avatar = image.findOne({_id:inf.F_FriendAvatarId})
                 e.name = inf.F_beizhu?inf.F_beizhu:userInf.nickname,
                 e.avatar = avatar.base64
             }
             else{
                const getUser = user.findOne({_id:this.id})
                if(getUser){
                const avatar = image.findOne({_id:getUser.avatarId})
                e.name = getUser.nickname
                 e.avatar = avatar.base64
                 }     
             }
         })
         list.sort((item1,item2)=>{
             return item2.create_time-item1.create_time
         })
         this.showLoading =false
         return list
    }
    },
     mounted(){
  // 先给页面注册滚动事件
        document.addEventListener('scroll',this.Scroll, true)
    },
    destroyed(){
        this.setCircleReaded()
    },
    watch:{
        scrollTop(){
            if(this.scrollTop<=50){
                this.backgroundColor = '#fff'
                this.white = false
                this.cameraColor = ''
                this.showTitle = true
            }
            else{
                 this.backgroundColor = '',
                 this.white = true,
                 this.cameraColor = '#fff'
                 this.showTitle =false
            }
        }
    },
    data() {
        return {
            showLoading:true,
            scrollTop:999,
            backgroundColor:'none',
            white:true,
            cameraColor:'#fff',
            showTitle:false,
            // 发布朋友圈弹出框
            showPublishAction:false,
            actions: [{ name: '拍摄',subname: '照片或视频' }],
            imgList:[],
            upLoadLength:0,
            id:sessionStorage.getItem('user')
        }
    },
    methods:{
        toLastPage(){
            this.$router.push('/found')
        },
        // 修改背景图
        chooseBg(){
            console.log('123')
        },
        // 滚动事件
    Scroll(){
        if(this.$refs.content){
            this.scrollTop =  this.$refs.content.getBoundingClientRect().top
        } 
    },
    // 打开朋友圈发布弹出框
    publishCircle(){
        this.showPublishAction = !this.showPublishAction
    },
    onSelect(item){
        console.log(item)
    },
    // 图片上传
     afterRead(file) {
        if(file instanceof Array){
            this.upLoadLength = file.length
            file.forEach((e,i) => {
                upload.uploadImg(e,this.afterUploadByMore)
            })
        }
        else{
            upload.uploadImg(file,this.afterUploadByOne)
        } 
    },
    //上传一张图片成功后
    afterUploadByOne(res){
         if(res){
            this.imgList.push(res)
            sessionStorage.setItem('imgList',JSON.stringify(this.imgList))
            this.$router.push('/showDetail')
         }
    },
    // 上传多张图片成功后
    afterUploadByMore(res){
        if(res){
            this.imgList.push(res)
            if(this.imgList.length == this.upLoadLength){
                sessionStorage.setItem('imgList',JSON.stringify(this.imgList))
                this.$router.push('/showDetail')
            }
        }
    },
    // 设置朋友圈已读
    setCircleReaded(){
        Meteor.call('circleStatus.updateByread',this.id)
    }
    }
}
</script>
<style scoped>
    .friendCircle{
        background-color: #fff;
        min-height: 100vh;
    }
    .icon{
        position: relative;
        top: .4rem;
    }
    .bg{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 10rem;
        background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1183756660,1287210535&fm=26&gp=0.jpg') no-repeat;
        background-size: cover;
    }
    .userInf{
        position: absolute;
        top:8.5rem;
        right: 1rem;
    }
    .nickname{
        color: #fff;
        font-size: .6rem;
        margin-right: .5rem;
        margin-top: .45rem;
    }
    .img{
        border-radius: .2rem;
    }
    .pyq-content{
        margin-top: 2rem;
    }
    .van-uploader{
        position: relative;
        left: 50%;
        transform:translateX(-50%) ;
        font-size: .75rem;
        padding: .5rem;
    }
</style>